<template>
  <view class="container">
    <view class="search-container">
      <input type="text" class="input" placeholder="请输入商品名称" v-model="keyword" />
      <view class="search-btn">
        <text class="search-text" @click="searchGoods">搜索</text>
      </view>
    </view>
    <view class="history-search">
      <view style="display: flex; justify-content: start; align-items: center; height: 10%">
        <image src="../static/images/historyicon.png" style="width: 31px; height: 31px" mode="'scaleToFill'" />
        <text class="history-text">最近搜索</text>
        <text v-if="isShowHistory" class="but pack-up" @click="isShowHistory = false">收起</text>
        <text v-if="!isShowHistory" class="but launch" @click="isShowHistory = true">展开</text>
        <image v-if="isShowHistory" src="../static/images/shouqi.png" mode="scaleToFill" class="downuppic" />
        <image v-if="!isShowHistory" src="../static/images/xiala.png" mode="scaleToFill" class="downuppic" />
        <image src="../static//images/delete.png" @click="deleteHistory" mode="scaleToFill" class="deletepic" />
      </view>

      <view class="history-container">
        <text v-if="isShowHistory" class="history-item" v-for="(item, index) in historySeachee.historySeachs"
          :key="item" @click="selectSeach(item)" @mouseenter="mouseenters" @mouseleave="mouseleaves">{{ item }}</text>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { historySeach } from '@/stores/modules/history'
import { toUnicode } from 'punycode'
import { ref } from 'vue'
const isShowHistory = ref<boolean>(true)
const ismouse = ref<boolean>(false)
const keyword = ref<string>('')
const historySeachee = historySeach()
const searchGoods = () => {
  const keywordValue = keyword.value.trim()
  if (keywordValue == '') {
    uni.showToast({
      title: '请输入商品名称',
      icon: 'none',
    })
  } else {
    historySeachee.addhistorySeach(keywordValue)
  }
}
const selectSeach = (item: string) => {
  keyword.value = ''
  keyword.value = item
}
const deleteHistory = () => {
  uni.showModal({
    title: '提示',
    content: '确定全部删除记录吗？',
    success: (res) => {
      if (res.confirm) {
        historySeachee.clearAllhistorySeach()
        isShowHistory.value = true
      }
    },
  })
}
const mouseenters = () => {
  ismouse.value = true
}
const mouseleaves = () => {
  ismouse.value = false
}
</script>

<style scoped>
.input {
  width: 80%;
  height: 40px;
  padding-left: 5%;
  background-color: rgb(225, 216, 216);
  border-radius: 10px;
  color: rgb(54, 52, 52);
}

.move {
  background-color: #8b8080;
}

.search-container {
  display: flex;
  width: 100%;
}

.search-text {
  font-weight: normal;
}

.but {
  margin-left: 5%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  color: #000;
}

.downuppic {
  width: 20px;
  height: 30px;
  margin-left: 1%;
}

.search-btn {
  color: #b0641cab;
  width: 15%;
  height: 40px;
  font-size: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 2%;
}

.container {
  padding: 20px;
  background-color: #f7f7f709;
  width: 100vw;
  height: 100vh;
  background-image: url('../static/images/logo_icon.png');
  background-repeat: no-repeat;
  background-position: center;
}

.deletepic {
  margin-left: 40%;
  height: 25px;
  width: 25px;
}

.history-search {
  width: 100%;
  margin-top: 10%;
  height: 50%;
}

.history-text {
  font-size: 20px;
  color: rgb(202, 182, 182);
  margin-left: 2%;
  height: 25px;
  text-align: center;
}

.history-container {
  display: flex;
  width: 100%;
  flex-direction: row;
  flex-wrap: wrap;
}

.history-item {
  display: flex;
  /* 启用 Flexbox */
  justify-content: center;
  /* 水平居中 */
  align-items: center;
  /* 垂直居中 */
  margin: 3%;
  white-space: nowrap;
  /* 禁止换行 */
  height: 20px;
  /* 固定高度 */
  /* width: 25%; */
  /* 固定宽度 */
  color: white;
  /* 字体颜色 */
  padding: 3%;
  /* 内边距 */
  overflow: clip;
  /* 超出部分隐藏 */
  background-color: #b3adad;
  /* 背景颜色 */
  border-radius: 10px;
  /* 圆角边框 */
  text-overflow: ellipsis;
  /* 超出文本用省略号表示 */
}
</style>
